<template>
    <v-container fluid class="pa-0">
        <RelationshipElement :relationshipElementObject="annotatedRelationshipElementObject"></RelationshipElement>
        <!-- Annotations -->
        <v-list-item class="px-1 pb-1 pt-0">
            <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Annotations: ' }}</v-list-item-title>
        </v-list-item>
        <!-- Iterate over all Annotations of the AnnotatedRelationshipElement -->
        <div v-for="SubmodelElement in annotatedRelationshipElementObject.annotations" :key="SubmodelElement.idShort" class="mb-3">
            <!-- Display SubmodelElement -->
            <!-- <SubmodelElementWrapper :SubmodelElementObject="SubmodelElement" :cardStyle="'outlined'"></SubmodelElementWrapper> -->
            <component :is="SubmodelElementWrapper" v-if="SubmodelElementWrapper" :SubmodelElementObject="SubmodelElement" :cardStyle="'outlined'"></component>
        </div>
    </v-container>
</template>

<script lang="ts">
import { defineComponent, shallowRef } from 'vue';
import RelationshipElement from './RelationshipElement.vue';
// import SubmodelElementWrapper from '../UIComponents/SubmodelElementWrapper.vue';

export default defineComponent({
    name: 'AnnotatedRelationshipElement',
    components: {
        RelationshipElement,
        // SubmodelElementWrapper,
    },
    props: ['annotatedRelationshipElementObject'],

    setup() {
        const SubmodelElementWrapper = shallowRef(null) as any;

        import('../UIComponents/SubmodelElementWrapper.vue').then((module) => {
            SubmodelElementWrapper.value = module.default;
        });

        return {
            SubmodelElementWrapper
        };
    },
});
</script>
